<template>
  <template v-if="isAlready">
    <template v-if="drag">
      <el-tabs v-model="activeName" style="height: 100%;" :tab-position="widget.props.tabPosition"
               :type="widget.props.styleType" :stretch="widget.props.stretch"
               @tab-remove="removeTab" :before-leave="beforeLeave">
        <el-tab-pane v-for="tab in widget.props.tabs" :label="tab.label" :name="tab.name" :closable="tab.closable">
          <el-row style="width: 100%;">
            <el-col :span="6">
              <el-form-item label="分组名称" size="small">
                <el-input v-model="tab.label"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="每行列数" size="small">
				  <ex-select v-model="tab.colSpan" dict-code="FORM_ITEM_SPAN" placeholder="请选择" ></ex-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签统一宽度" size="small">
                <el-input-number v-model="tab.labelWidth"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="控件尺寸" size="small">
				  <ex-select v-model="tab.widgetSize" dict-code="WIDGET_SIZE" placeholder="请选择"></ex-select>
              </el-form-item>
            </el-col>
          </el-row>
          <draggable class="widgetDragAreaClass" v-model="tab.columns" animation="300"
                     :style="'height:'+ dragAreaHeight+'px;'"
                     item-key="id" :group="{name:'columns'}"
                     @change="dragChange(tab.columns)">
            <template #item="{ element }">
              <el-col class="colItemClass" :span="element.colSpan?element.colSpan:tab.colSpan">
                <ex-form-item :column="element" :model="model"
                              :size="tab.widgetSize"
                              :label-width="tab.labelWidth+'px'" drag/>
              </el-col>
            </template>
          </draggable>
        </el-tab-pane>
        <el-tab-pane name="addTab">
          <template #label>
            <el-icon size="large" @click="dblClick" style="margin-right: 20px;">
              <component is="el-icon-setting"></component>
            </el-icon>
            <el-icon size="large" @click="addForm = {visible: true}">
              <component is="el-icon-circle-plus"></component>
            </el-icon>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-else>
		<template v-if="showCard===false">
			<el-main v-loading="showCard===false" style="height: 300px;"></el-main>
		</template>
      <el-tabs v-show="showCard" v-model="activeName" style="height: 100%;" :tab-position="widget.props.tabPosition"
               :type="widget.props.styleType" :stretch="widget.props.stretch">
        <template v-for="tab in widget.props.tabs">
          <el-tab-pane v-if="tab.show" :label="tab.label" :name="tab.name">
            <template v-for="element in tab.columns">
              <el-col class="_colItemClass" :span="element.colSpan?element.colSpan:tab.colSpan">
                <ex-form-item :column="element" :model="model"
                              :size="tab.widgetSize"
                              :label-width="tab.labelWidth+'px'" :span="tab.colSpan"/>
              </el-col>
            </template>
          </el-tab-pane>
        </template>
      </el-tabs>
    </template>


    <el-dialog v-model="addForm.visible" width="500">
      <template #default>
        <div style="width: 90%;">
          <el-form-item label="分组名称" label-width="100">
            <el-input v-model="addForm.label" clearable/>
          </el-form-item>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto;text-align: center;">
          <el-button plain type="primary" @click="addTab">确 认</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="innerDrawer">
      <el-drawer v-model="drawerModel" size="130px;" direction="btt" :withHeader="false"
                 style="position: absolute;z-index: -1;">
        <el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;" size="small">
          <el-row>
            <el-col :span="6" class="colClass">
              <el-form-item label="风格类型">
                <el-select v-model="widget.props.styleType" style="width: 100px;">
                  <el-option label="默认" value=""/>
                  <el-option label="选项卡" value="card"/>
                  <el-option label="卡片化" value="border-card"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" class="colClass">
              <el-form-item label="选项卡位置">
                <el-select v-model="widget.props.tabPosition" style="width: 100px;">
                  <el-option label="顶部" value="top"/>
                  <el-option label="左侧" value="left"/>
                  <el-option label="右侧" value="right"/>
                  <el-option label="底部" value="bottom"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" class="colClass">
              <el-form-item label="">
                <el-col :span="6" class="colClass">
                  <el-form-item label="自动填充">
                    <el-switch
                        v-model="widget.props.stretch"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        :active-value="true"
                        :inactive-value="false">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-drawer>
    </div>

  </template>
</template>
<script>

import draggable from "vuedraggable";
import ExFormItem from "@/components/exFormItem/index.vue";
import ExSelect from "@/components/exSelect/index.vue";

export default {
  name: "dyTabs",
  components: {ExSelect, ExFormItem, draggable},
  props: {
    model: {type: Object, default: {}},
    widget: {type: Object, default: null},
    drag: {type: Boolean, default: false},
  },
  data() {
    return {
      isAlready: false,
		showCard:false,
      drawerModel: false,
      dragAreaHeight: 150,
      activeName: '',
      addForm: {
        visible: false,
        label: '',
      },
    }
  },
  watch: {
    widget: {
      handler() {
        if(this.drag===false&&this.isAlready===true){
			let _authFilterStatus = true;
		  this.widget.props.tabs.forEach(tab => {
			if(tab.columns&&tab.columns.length>0){
			  tab.show = tab.columns.filter(column => column.show === true).length > 0;
			  tab._authFilterStatus = tab.columns.filter(column => column._authFilterStatus !== true).length === 0;
			}else{
			  tab.show = true;
			  tab._authFilterStatus = true;
			}
		  });
			  _authFilterStatus = this.widget.props.tabs.filter(tab => tab._authFilterStatus !== true).length === 0;
			if(_authFilterStatus){
				setTimeout(()=>{
					this.model = true;
				},500);
			}
        }
      },
      deep: true,
      immediate: true,
    }
  },
  async created() {

	  if (!this.widget.props.tabs) {
		  this.widget.props.tabs = [];
	  }

	  if (this.widget.props.tabs && this.widget.props.tabs.length > 0) {
		  this.activeName = this.widget.props.tabs[0].name;
	  } else {
		  this.widget.props.tabs = [this.newTab('基本信息', this.$TOOL.uuid("tab"), true)];
		  this.activeName = this.widget.props.tabs[0].name;
	  }

	  for (const tab of this.widget.props.tabs) {
		  tab.show = true;
		  tab.name = this.$TOOL.uuid("tab");
		  if(tab.columns){
			  for (const column of tab.columns) {
				  let oriColumn = await this.$cache.data.loadColumn(column.columnId);
				  Object.assign(column, oriColumn);
			  }
		  }
	  }
	  this.isAlready = true;
  },

  methods: {
    dblClick: function () {
      this.drawerModel = true;
    },

    //当切换到添加分组tab时，禁止切换
    beforeLeave: function (activeName, oldActiveName) {
      if ('addTab' === activeName) {
        return false;
      }
    },
    newTab(label, name, closable) {
      return {
        label: label,
        name: name,
        columns: [],
        closable: closable,
        colSpan: 8,
        widgetSize: 'small',
        labelWidth: 100,
        orderWeight: 0
      };
    },
    //添加卡片分组tab
    addTab: function () {
      if (!this.addForm.label || this.addForm.label.trim().length === 0) {
        this.$message.warning({message: '请输入分组名称'});
        return;
      }
      if (this.widget.props.tabs.filter(tab => tab.label === this.addForm.label).length > 0) {
        this.$message.warning({message: '分组名称已存在'});
        return;
      }
      this.addForm.visible = false;
      let tab = this.newTab(this.addForm.label, this.$TOOL.uuid("tab"), true);
      tab.orderWeight = this.widget.props.tabs.length + 1;
      this.widget.props.tabs.push(tab);
      this.activeName = tab.name;
    },
    //删除分组时，重置该分组已布局的字段
    removeTab: function (tabName) {
      this.$confirm(`该分组已布局字段将全部清除`, '提示', {
        type: 'warning'
      }).then(() => {
        this.widget.props.tabs.forEach((tab, index) => {
          if (tab.name === tabName) {
            let nextTab = this.widget.props.tabs[index + 1] || this.widget.props.tabs[index - 1];
            if (nextTab) {
              this.activeName = nextTab.name
            }
            // tab.cardStyles.forEach(item => {
            //   this.reStoreColumn(item);
            // });
          }
        });
        this.widget.props.tabs = this.widget.props.tabs.filter((tab) => tab.name !== tabName);
      }).catch(() => {
      });
    },

    dragChange: function (columns) {
      columns.forEach((item, index) => {
        item.orderWeight = index;
      })
    },
  }
}
</script>
